import React from 'react';
import { Anchor as AntdAnchor } from 'antd';
import type { AnchorProps as AntdAnchorProps } from 'antd';
import { createStyles } from 'antd-style';

export interface AnchorProps extends AntdAnchorProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  anchor: css`
    color: ${token.colorText};
  `,
}));

const AnchorComponent: React.FC<AnchorProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const anchorClassName = cx(
    className,
    customClassName,
    styles.anchor
  );

  return <AntdAnchor className={anchorClassName} {...restProps} />;
};

const Anchor = Object.assign(AnchorComponent, {
  Link: AntdAnchor.Link,
});

export { Anchor };
export default Anchor;

